<template>
	<view>
		<template v-if="isDataEmpty">
			<view class="search-loading" v-if="status === 'loading'">
				<u-loadmore :status="status" :load-text="loadText" />
			</view>
			<view class="empty" v-else-if="isSearch">
				<image src="/static/empty/search.png" mode="widthFix"></image>
				<view class="tips">
					换一个关键字试试吧
				</view>
			</view>
			<view class="empty" v-else>
				<slot name="empty">
					<image src="/static/empty/order.png" mode="widthFix"></image>
					<view class="tips">
						列表为空
					</view>
				</slot>
			</view>
		</template>
		<template v-else>
			<slot name="list"></slot>
			<view class="load" v-if="load">
				<u-loadmore :status="status" :load-text="loadText" />
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			isDataEmpty: {
				type: Boolean,
				default: false
			},
			status: {
				type: String,
				default: ''
			},
			isSearch: {
				type: Boolean,
				default: false
			},
			noMoreText: {
				type: String,
				default: '我也是有底线的~'
			},
			loadingText: {
				type: String,
				default: '加载中...'
			},
			loadmoreText: {
				type: String,
				default: '轻轻上拉'
			},
			load: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				loadText: {
					loadmore: this.loadmoreText,
					loading: this.loadingText,
					nomore: this.noMoreText
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 400rpx;
			height: auto;
		}
	}

	.search-loading {
		display: flex;
		justify-content: center;
		padding-top: 80rpx;
	}

	.tips {
		color: gray;
		font-size: 24rpx;
	}

	.load {
		padding: 30rpx 0;
	}
</style>